为 何 写作 本 书 


随 着 互联 网 技术 的 发 展 ， 尤 其 是 移动 互联 网 技术 的 兴起 和 迅速 半 大 ， 前 端 应 用 的 开发 并 非 简单 静态 页 的 制作 ， 越 来 越 多 的 功能 复杂 的 动态 应 用 由 前 端 来 完成 。 但 是 ， 在 实现 的 过 
程 中 ， 前 端 技术 自身 有 许多 的 不 足 ， 很 难 实现 某 些 复杂 功能 。 为 克服 自身 的 不 足 ， 往 往 需要 借助 一 些 常用 的 类 库 和 框架 ， 如 jQuery 和 Backbone 等 ， 但 这 些 外 部 引入 的 类 库 或 框架 只 方便 
了 代码 开发 ， 并 未 从 根本 上 改变 页 面 结构 。 为 了 从 根本 上 克服 静态 页 在 应 用 开发 过 程 中 的 不 足 ， 我 们 引入 了 AngulatJS 框 架 。 


AngularJS 是 目前 最 热门 的 一 种 前 端 开 发 框架 ， 为 了 简化 ， 也 可 直接 称 为 Angulat， 其 实 它 们 都 表示 一 套 相 同 的 框架 代码 ， 这 套 代 码 与 其 他 类 库 和 框架 的 不 同 之 处 在 于 ， 它 能 从 HTML 
本 身 的 结构 去 改变 开发 动态 应 用 的 不 足 ， 如 创建 类 似 于 页 面 元 素 的 指令 ， 使 用 { 他 } 括 号 的 方式 绑 定 数据 ， 将 一 些 远 辑 代码 与 页 面 的 元 素 进行 关联 ， 将 HTML 分 组 为 可 复 用 的 各 类 组 件 。 
同时 ，AngulatJS 还 很 完美 地 支持 页 面 中 的 表单 元 素 和 相关 的 验证 功能 。 


当然 ，AngulatJS 中 的 内 容 远 不 止 上 述 提 及 的 几 个 部 分 但 它 的 核心 功能 是 通过 改变 HTMIL 页 面 的 结构 ， 增 强 和 扩大 DOM 元 素 。 基 于 这 些 提升 的 功能 ， 开 发 人 员 可 以 非常 方便 、 快 
捷 地 开发 出 一 个 具有 增加 、 删 除 、 人 和 修改、 查询 功能 的 前 端 应 用 ， 而 在 构建 这 种 应 用 的 过 程 中 ，AngularJS 提 供 了 大 量 可 使 用 的 功能 ， 如 数据 双向 绑 定 、 服 务 依赖 注入 、 组 件 复 用 、 路 由 
导航 和 应 用 测试 与 部 署 等 ， 这 是 其 他 框架 不 可 及 之 处 ， 也 是 它 的 魅力 所 在 。 


“ 临 渊 美 备 ， 不 如 退 而 结 网 ”， 每 一 个 从 事 Web 应 用 开发 的 工程 师 ， 无 论 是 从 事前 端 开 发 还 是 服务 端的 代码 开发 ， 都 有 理由 更 新 自己 的 知识 结构 ， 掌 握 这 门 炙手可热 的 技术 。 但 
AngularJS 毕 竟 是 一 门 全 新 的 前 端 开发 框架 ， 要 求 开 发 人 员 树 立 不 同 的 开发 理念 和 思路 才能 更 好 地 学 习 它 。 因 此 ， 借 助 相应 的 书籍 来 引导 开发 者 进行 学 习 是 非常 有 必要 的 。 目 前 市 场 中 
大 多 数 已 出 版 的 相关 书籍 只 是 简单 的 定义 解析 与 理论 灌输 ， 没 有 对 应 的 示例 操作 ， 缺 乏 对 读者 真正 的 实践 指导 。 本 书 的 诞生 ， 很 好 地 解决 了 这 些 难题 ， 也 衷心 希望 读者 能 通过 对 本 书 
的 理论 学 习 与 实践 演练 ， 早 日 开发 出 最 为 前 沿 与 时 尚 的 Web 应 用 。 


本 书 特色 
“学 以 致 用 ”是 本 书 的 一 个 重要 特点 ， 全 书 始终 体现 一 个 “用 ” 字 ， 无 论 是 理论 知识 的 介绍 ， 还 是 实用 示例 的 开发 ， 无 一 例外 ， 都 是 从 实用 的 角度 出 发 ， 对 每 一 个 示例 都 精心 先 


择 ， 详 细 介 绍 ; 为 使 读者 能 够 通过 示例 执行 后 的 页 面 效果 加 深 对 应 用 的 理解 ， 对 每 一 个 示例 都 精心 编排 ， 扼 要 说 明 ; 全 书 由 浅 入 深 ， 逐 步 推进 ， 以 示例 为 主线 ， 引 导读 者 的 阅读 兴 
趣 ， 是 本 书 的 特点 之 一 ; 全 面 、 详 细 、 完 整地 介绍 AngularJS 的 功能 与 特征 ， 又 是 本 书 的 另外 一 个 重要 特点 。 


如 何 阅 读本 书 


本 书 针对 的 是 Web 开 发 者 ， 无 论 是 前 端 开发 ， 还 是 后 台 编 码 ， 都 可 以 使 用 本 书 。 在 阅读 过 程 中 ， 由 于 本 书 的 结构 是 层 进 式 的 ， 章 节 之 间 有 一 定 的 关联 ， 因 此 ， 建 议 读者 按 章节 的 
编排 ， 逐 章 阅 读 ; 在 阅读 时 ， 尽 量 不 要 照抄 书 中 的 示例 ， 要 理解 主要 的 、 核 心 的 代码 ， 自 己 动手 开发 相似 功能 的 应 用 ， 并 逐步 完善 其 功能 ， 才 能 真正 掌握 其 代码 的 实质 。 


联系 作者 


希望 这 本 耗 时 一 年 ， 积 累 我 全 部 心得 与 技术 感悟 的 拙 著 能 给 每 位 阅读 本 书 的 读者 带 来 思路 上 的 启发 与 技术 上 的 提升 ， 使 每 位 读者 通过 阅读 本 书 能 够 有 所 悟 或 有 所 得 。 同 时 ， 也 非 
常 希 望 能 借 本 书 出 版 之 机 与 国内 热衷 于 AngulatJS 技 术 的 开发 者 进行 交流 。 如 果 大 家 想 与 我 联系 ， 可 以 通过 邮箱 tao_guo_tong@163.com 给 我 发 邮件 。 
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第 1 章 初 识 Angular 


Angular 是 Google 公 司 提供 的 一 套 开源 的 项 目 框架 ， 准 确 地 说 ， 是 一 套 基 于 MVC 结 构 的 Javascript 开 发 工具 ， 该 工具 的 核心 功能 就 是 对 现 有 HTML 编 码 以 指令 方式 进行 扩展 ， 并 
使 扩展 后 的 HTML 编 码 可 以 通过 使 用 元 素 声明 的 方式 来 构建 动态 内 容 。 因 此 ， 这 样 的 扩展 具有 划时代 的 意义 ， 这 也 是 Angular 框 架 自 诞生 起 就 备 受 关注 的 重要 原因 。 


本 章 将 从 Angular 最 基础 的 概念 进 起 ， 并 结合 几 个 简单 经 典 的 小 示例 ， 快 速 带领 大 家 进入 Angular 所 构建 的 “神奇 ”世界 中 。 


1.1 Angular 简 介 


从 开始 的 概述 中 我 们 知道 ，Angular 是 基于 HTML 基 础 进行 扩展 的 开发 工具 ， 其 扩展 的 目的 就 是 希望 能 通过 HTML 标 签 构建 动态 的 Web 应 用 。 要 实现 这 样 的 目的 ， 需 要 在 Angular 


内 部 利用 了 两 项 技术 点 ， 一 个 是 数据 的 双向 绑 定 ， 另 一 个 是 依赖 注入 。 下 面 我 们 来 简单 介绍 这 两 个 新 概念 。 


在 Angular 中 ， 数 据 绑 定 可 以 通过 {人 双 花 括号 的 方式 向 页 面 的 DOM 元 素 中 插入 数据 ， 也 可 以 通过 添加 元 素 属性 的 方式 绑 定 Angular 的 内 部 指令 ， 实 现 对 元 素 的 数据 绑 定 ， 这 两 种 
形式 的 数据 绑 定 都 是 双向 同步 的 ， 即 只 要 一 端 发 生 了 变化 ， 绑 定 的 另 一 端 会 自动 进行 同步 。 


依赖 注入 是 Angular 中 一 个 特有 的 代码 编写 方式 ， 其 核心 思想 是 在 编写 代码 时 ， 只 需要 关注 为 实现 页 面 功能 要 调用 的 对 象 是 什么 ， 而 不 必 了 解 它 需 依赖 于 什么 ， 像 逻辑 类 中 的 
$scope 对 象 就 是 通过 依赖 注入 的 方式 进行 使 用 的 。 


这 两 项 技术 点 ， 我 们 将 在 后 续 的 章节 中 进行 详细 介绍 ， 在 此 只 作 概 念 了 解 即 可 。 


在 Angular 框 架 中 ， 通 过 双向 绑 定 和 依赖 注入 这 两 个 功能 ， 极 大 减少 了 用 户 的 代码 开发 量 ， 只 需要 像 声明 一 个 HTML 元 素 一 样 ， 就 可 以 轻松 构建 一 个 复杂 的 Web 端 应 用 ， 而 这 种 方 
式 构建 的 应 用 的 全 部 代码 都 由 客户 端的 Javascript 代 码 完成 。 因 此 ，Angular 框 架 也 是 有 效 解 决 端 (客户 端 ) 对 端 (服务 端 ) 应 用 的 方案 之 一 。 


1.2 ”开发 简单 的 Angular 应 用 


先 ， 我们 来 编写 一 个 简单 的 Angular 应 用 ， 参 见 下列 的 示例 。 


示例 1-1 编号 一 个 简单 的 Angular 程 序 


(1) 功能 描述 


当 页 面 加 载 时 ， 在 页 面 的 正文 部 分 显示 “Hello， 欢 迎 来 到 angular 世 界 ! ”的 字样 。 


(2) 实现 代码 
新 建 一 个 HTML 文 件 1-1.html， 加 入 如 代码 清单 1-1 所 示 的 代码 。 


代码 清单 1-1 第 一 个 简单 的 Angular 程 序 


<!ldoctype html> 
<html ng-app> 
<head> 
<title> 第 一 个 简单 的 angular 程 序 </title> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/../Script/angular.min.js" 
type="text/javascript"></script> 
</head> 
<body> 
{{'Hello, 欢迎 来 到 angular 世 界 ! '}} 
</body> 
</html> 


(3) 页 面 效 果 


HTML 文 件 1-1.html 最 终 实现 的 页 面 效果 如 图 1-2 所 示 。 


四 编写 一 个 简单 的 angular 丰 Xx 


图 1-2 ”第 一 个 简单 的 Angular 程 序 
(4) 源码 分 析 


在 本 示例 的 代码 中 ， 我 们 先 在 <html> 元 素 中 增加 了 一 个 “ng-app” 属 性 ， 这 一 属性 的 功能 是 通知 引入 的 Angular 文 件 框架 ， 页 面 中 的 哪个 部 分 开始 接受 它 的 管理 。 既 然 是 在 
<html> 元 素 中 增加 这 个 属性 ， 表 明 Angular 可 以 管理 整个 页 面 文件 ，“ng-app” 属 性 还 可 以 添加 至 某 个 <div> 元 素 中 ， 表 明 仅 在 这 个 <div> 范 围 内 ， 可 以 调用 Angular 框 架 管理 其 中 
包含 的 DOM 元 素 。 


此 外 ， 在 页 面 的 <body> 元 素 中 ， 使 用 两 个 大 括号 的 方式 包含 了 一 个 字符 串 ， 其 中 两 个 大 括号 是 Angular 框 架 插入 动态 数据 的 一 种 方式 ， 我 们 称 之 为 “双人 花 括 号 插值 语法 ”。 在 通 
常情 况 下 ， 通 过 这 种 方式 插入 的 数据 均 为 表达 式 ， 并 且 在 插入 时 已 获取 了 表达 式 的 结果 值 ， 并 直接 将 该 值 显示 在 页 面 中 。 在 本 实例 中 ， 由 于 表达 式 是 字符 串 内 容 ， 因 此 ， 直 接 显示 在 
页 面 中 。 


接 下 来 ， 我 们 再 来 看 一 个 Angular 示 例 ， 进 一 步 了 解 Angular 数 据 插入 功能 。 


示例 1-2 编写 一 个 具有 计算 功能 的 Angular 程 序 


(1) 功能 描述 

当 页 面 加 载 时 ， 在 页 面 的 正文 部 分 通过 插入 数据 的 方式 计算 任意 一 对 数值 的 和 ， 并 将 计算 后 的 结果 显示 在 页 面 中 。 
(2) 实现 代码 

新 建 一 个 HTML 文 件 1-2.html， 加 入 如 代码 清单 1-2 所 示 的 代码 。 


代码 清单 1-2 一 个 计算 功能 的 Angular 程 序 


<!ldoctype html> 
<html ng-app> 
<head> 

<title> 一 个 计算 功能 的 angular 程 序 </title> 

<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/../Script/angular.min.js" 

type="text/javascript"></script> 

</head> 
<body> 

<h3> 计 算 并 显示 下 列 两 个 数值 的 和 </h3> 

1.98 + 2.98 = {{ 1.98 + 2.98 | number:0}} 
</body> 


</html> 


(3) 页 面 效 果 


HTML 文 件 1-1.htm| 最 终 实 面 效果 如 图 1-3 所 示 。 


站 一 个 计算 功能 的 angular 丰 x 


各 人 Blocalhost/Ch1/i- 2.html ws 


计算 并 显示 下 列 两 个 数值 的 和 


lH + 2 = 5 


图 1-3 ”一 个 计算 功能 的 Angular 程 序 


(4) 源码 分 析 


在 本 示例 的 代码 中 ， 除 了 在 <html> 元 素 中 添加 “ng-app” 属 性 ， 表 明 整 个 页 面 代 码 都 由 Angular 框 架 进 行 管理 外 ， 在 使 用 双 花 括号 插入 数值 时 ， 先 通过 加 号 “+” 运 算 符 计算 出 
两 个 数值 的 结果 并 返回 给 页 面 ， 然 后 ， 在 计算 数值 时 使 用 了 一 个 “| ”管道 符号 ， 这 个 符号 在 Angular 中 表示 调用 过 滤器 格式 化 数据 ， 它 的 调用 方法 如 下 。 


{{exp | filtername : paral:http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/.. .paraN}} 


在 上 述 调 用 方法 中 ，exp 表 示 Angular 可 以 识别 的 任意 表达 式 ，filtername 表 示 过 滤器 的 名 称 。 


Angular 内 置 了 很 多 的 过 滤器 ， 如 currency、date、number 和 uppercase 等 ，para1 表 示 对 过 滤器 功能 的 进一步 描述 ， 如 示例 中 的 “number: 0” 表 示 除 掉 小 数 后 的 数值 ， 保 留 
整数 部 分 。 当 然 ， 除 使 用 Angular 内 置 的 过 滤器 外 ， 还 可 以 自 定义 自己 的 过 滤器 ， 具 体 实 现 的 方式 将 会 在 后 续 的 章节 中 进行 详细 的 介绍 。 


通过 上 述 两 个 示例 的 介绍 ， 相 信 大 家 已 经 被 Angular 的 语法 所 吸引 ， 更 被 它 “ 神 奇 ”的 数据 插入 功能 所 折服 。 上 述 两 个 示例 都 采用 以 双 花 括号 插入 表达 式 的 形式 ， 将 数据 添加 至 页 
面 的 模板 中 ， 如 果 将 表达 式 的 数据 与 页 面 中 的 元 素 直接 进行 绑 定 ， 又 会 发 生 什 么 样 的 事情 呢 ? 接 下 来 我们 再 来 看 一 个 简单 的 示例 。 


示例 1-3 ”编写 一 个 绑 定 页 面 元 素 的 Angular 程 序 


(1) 功能 描述 
在 页 面 中 ， 先 添加 一 个 用 于 文本 输入 的 <input> 元 素 ， 并 通过 Angular 指 令 绑 定 一 个 表达 式 ， 然 后 ， 再 添加 一 个 <div> 元 素 ， 通 过 Angular 中 的 双 花 括号 插入 相同 的 表达 式 ， 当 文 


本 输入 框 中 的 内 容 变化 时 ，<div> 元 素 插入 的 内 容 也 随 之 发 生变 化 。 
(2) 实现 代码 
新 建 一 个 HTML 文 件 1-3.html， 加 入 如 代码 清单 1-3 所 示 的 代码 。 


代码 清单 1-3 ”一 个 绑 定 页 面 元 素 的 Angular 程 序 


<!doctype html> 
<html ng-app> 
<head> 
<title> 一 个 绑 定 页 面 元 素 的 angular 程 序 </title> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/../Script/angular.min.js 
type="text/javascript"></script> 
</head> 
<body> 


<h3> 请 在 下 列 文本 框 中 输入 任意 内 容 </h3> 
<div ng-controller="usercontroller"> 
<input id="Text1" type="text" ng-model="user.name" /> 
<div>{ {user.name}}</div> 
</div> 
<script type="text/javascript"> 
function usercontroller ($scope) 
$scope.user = { name: "™ }; 
} 
</script> 
</body> 
</html> 


(3) 页 面 效果 


HTML 文 件 1-3.html 最 终 实现 的 页 面 效 果 如 图 1-4 所 示 。 


(4) 源码 分 析 


在 本 示例 的 源 代码 中 ， 在 <html> 元 素 中 添加 了 “ng-app” 属 性 ， 表 明 Angular 可 以 管理 整个 页 面 。 此 外 ， 向 <div> 元 素 添加 了 一 个 名 为 “ng-controller” 的 属性 ， 该 属性 是 
Angular 的 另外 一 个 指令 ， 用 来 声明 Angular 中 控制 器 类 的 名 称 ， 并 且 这 个 被 声明 的 类 将 管理 <div> 中 的 全 部 元 素 。 


< >c 
请 在 下 列 文本 框 中 输入 任意 内 容 


陶 国 荣 你 好 | 


陶 国 荣 你 好 
R 


图 1-4 ”一 个 绑 定 页 面 元 素 的 Angular 程 序 


接 下 来 ， 再 向 文本 框 元 素 添加 一 个 “ng-model” 属 性 ， 绑 定 逻 辑 层 中 的 user name 数 据 ， 并 同时 通过 双 花 括号 向 页 面 中 的 另外 一 个 <div> 元 素 插 入 相同 的 username 内 容 。 在 
Angular 中 ， 使 用 “ng-model” 方式 绑 定 数据 是 双向 变化 的 ， 即 如 果 数据 源 发 生 了 变化 ， 被 法 定 的 元 素 中 的 内 容 也 将 会 自动 进行 同步 变化 ， 反 之 ， 数 据 源 也 会 随 被 绑 定 的 元 素 值 的 变 
化 而 变化 。 


因此 ， 当 用 户 在 文本 框 中 输入 任意 内 容 时， 改变 了 绑 定 的 数据 源 ， 而 其 他 插入 的 相同 数据 源 也 将 随 之 进行 同步 ， 页 面 插入 的 user.name 内 容 也 将 跟随 变化 ， 而 实现 这 一 切 ， 都 无 
需 注册 任何 文本 框 的 change 事 件 去 监听 ， 就 可 以 让 页 面 中 的 元 素 绑 定 的 数据 自动 刷新 。 


这 一 特征 也 同样 适用 于 服务 器 端的 更 新 ， 即 当 我 们 向 服务 器 请 求 一 个 数据 时 获取 了 最 新 的 username 值 ， 而 在 页 面 中 绑 定 的 输入 框 内 容 和 插入 显示 的 数据 也 将 会 同时 自动 更 新 为 
最 新 值 。 


除 此 之 外 ，Angular 还 可 以 通过 数据 绑 定 的 方式 ， 将 重复 格式 的 多 项 数据 内 容 显示 在 页 面 各 个 元 素 中 ， 接 下 来 我 们 再 通过 一 个 简单 的 示例 来 进行 说 明 。 


示例 1-4 ”编写 一 个 绑 定 多 个 页 面 元 素 的 Angular 程 序 


(1) 功能 描述 


在 页 面 中 ， 通 过 Angular 中 的 数据 元 素 绑 定 的 方式 ， 将 一 个 数组 集合 中 的 各 项 元 素 与 页 面 中 的 多 个 <span> 元 素 绑 定 ， 并 通过 遍历 的 方式 将 全 部 数据 插入 至 页 面 的 模板 中 。 


(2) 实现 代码 


新 建 一 个 HT 


ML 文件 1-4.html， 加 入 如 代码 清单 1-4 所 示 的 代码 。 


代码 清单 1-4 一 个 绑 定 多 个 页 面 元 素 的 Angular 程 序 


<!dqoctype html> 
<html ng-app> 


<head> 
<title> 


一 个 绑 定 多 个 页 面 元 素 的 angular 程 序 </title> 


<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/../Script/angular.min.js" 


</head> 
<body> 


type="text/javascript"></script> 


<h3> 以 列表 的 方式 显示 绑 定 的 多 项 数据 </h3> 
<div ng-controller="stucontroller"> 


<ul> 
< 


避 
</ul 

<div> 

<script 


li ng-repeat="stu in data"> 
<span>{ {stu.name} }</span> 
<span>{ {stu.sex}}</span> 
<span>{{stu.age}}</span> 
<span>{{stu.score}}</span> 

A LL 

> 


type="text/javascript"> 


function stucontroller($scope) { 


$scope.data = [ 


{ name: " 张 明 明 "，sex: " 女 "，age: 24, score: 95 }， 
{ name: " 李 清 思 "，sex: " 女 "，age: 27，score: 87 }， 
{ name: " 刘 小 华 "，sex: " 男 "，age: 28，score: 86 }， 
{ name: " 陈 忠 忠 "， Sex: " 男 "，， age: 23，score: 97 } 
] 7 
} 
</script> 
</body> 
</html> 
(3) 页 面 效果 


HTML 文 件 1-4.html 最 终 实现 的 页 面 效 果 如 图 1-5 所 示 。 


证 一 个 绑 定 多 个 页 面 元 素 的 = x 山 通 


4 了 CDioclhosychyl4hm 站 三 
以 列表 的 方式 显示 绑 定 的 多 项 数据 


张 明 明 女 24 95 
李 清 思 女 27 87 


刘 小 华 男 28 86 
陈 忠 忠 男 23 97 


图 1-5 一 个 绑 定 多 个 页 面 元 素 的 Angulat 程 序 


(4) 源码 分 析 


在 本 示例 的 源 代码 中 ， 除 在 <li> 元 素 中 声明 的 控制 器 管理 类 “stucontroller” 之 外 ， 还 在 <li> 元 素 中 添加 了 一 个 名 为 “ng-repeat” 的 


示 复 制 的 意思 ， 


即 对 于 “data” 数 组 中 的 每 个 元 素 ， 都 会 将 <li> 元 素 中 的 结构 复制 一 次 ， 在 每 次 复制 使 用 时 ， 再 将 “stu” 的 


属性 值 赋予 复制 的 <li> 中 各 个 元 素 。 因 此 ， 


属性 ， 该 属性 是 Angular 的 一 个 新 指令 ， 表 


“data” 数 组 


中 的 数量 与 复制 后 的 <li> 元 素 的 数量 是 一 致 的 ， 并 且 在 每 次 复制 成 功 之 后 ， 都 将 数组 中 的 各 个 元 素 内 容 通 过 双 花 括号 的 方式 插入 到 <li> 元 素 中 ， 从 而 实现 了 在 <li> 元 素 中 显示 全 
部 “data” 数 组 内 容 的 功能 。 


而 当 “data” 数 组 中 的 源 数据 发 生变 化 后 ， 使 用 双 花 括号 绑 定 的 数据 内 容 也 将 会 随 之 发 生变 化 ， 而 这 些 变化 ， 在 Angular 中 都 是 自动 完成 的 ， 无 须 注册 任何 监测 的 事件 。 


1.3 ”本 章 小 结 


在 本 章 中 ， 我 们 通过 一 个 个 简单 示例 ， 由 浅 入 深 地 介绍 Angular 应 用 开发 的 过 程 ， 相 信 通 过 本 章 的 学 习 ， 读 者 会 对 Angular 代 码 的 风格 有 一 个 初步 的 了 解 ， 但 Angular 毕 竟 是 一 种 
全 新 的 语言 ， 需 要 学 习 者 学 习 许多 新 的 概念 ， 我 们 将 在 接 下 来 的 章节 中 继续 介绍 Angular 的 更 多 基础 知识 。 


第 2 章 ”Angular 基 础 知识 


通过 上 一 章 对 Angular 的 简单 介绍 ， 相 信 读 者 对 使 用 Angular 开 发 Web 应 用 有 了 一 个 大 致 的 了 解 。 由 于 Angular 是 一 个 全 新 的 开发 工具 ， 因 此 需要 掌握 许多 必要 的 基础 概念 。 本 章 
将 从 最 底层 的 知识 讲 起 ， 由 浅 入 深 地 带领 大 家 了 解 并 掌握 Angular 开 发 工具 中 的 表达 式 、 控 制 器 、 模 板 和 模板 中 的 过 滤器 这 些 必须 了 解 的 基础 知识 。 


2.1 Angular 中 的 表达 式 


在 Angular 中 ， 表 达 式 是 运用 在 视图 中 的 一 个 段 代码 ， 例 如 在 第 1 章 的 示例 1-2 中 ， 在 计算 两 个 数据 的 和 时 ， 双 花 括号 中 就 是 一 个 数值 表达 式 ， 其 中 的 值 是 通过 调用 $parse 服 务 模 
块 进行 解析 的 。 如 果 需 要 格式 化 表达 式 中 的 值 ， 也 可 以 调用 Angular 中 的 过 滤器 ， 例 如 在 第 1 章 示 例 1-2 中 ， 管 道 符 “| ”之 后 的 “number: 0” 则 调用 了 整数 型 过 滤器 。 


2.2 Angular 中 的 控制 器 


在 介绍 完 Angular 中 的 表达 式 后 ， 接 下 来 再 来 介绍 一 下 Angular 中 一 个 重要 角色 一 一 控制 器 (controller) 。 其 实 ， 在 前 面 的 章节 中 我 们 也 多 次 提 到 它 ， 那 么 Angular 中 的 控制 
器 到 底 是 什么 ? 它 又 能 实现 哪些 功能 呢 ? 接 下 来 ， 我 们 结合 示例 来 逐一 进行 解析 。 


2.3 Angular 中 的 模板 


Angular 自 身 提 供 了 一 整套 完整 的 模板 系统 ， 配 合 gscope 对 象 和 数据 双向 绑 定 机 制 ， 将 页 面 纯 静 态 元 素 经 过 行为 、 属 性 的 添加 和 格式 的 转换 ， 最 终 变 成 在 浏览 器 中 显示 的 动态 
页 。 


在 模板 系统 中 ， 可 以 包含 Angular 的 指令 、 数 据 绑 定 、 表 单 控件 和 过 滤器 ， 同 时 ， 在 处 理 复杂 程序 时 ， 可 以 构建 多 个 模板 页 面 作用 于 视图 层 。 在 主页 中 ， 再 通过 包含 (include) 
的 方式 加 载 这 些 零 散 的 模板 页 。 这 样 做 的 好 处 在 于 ， 一 次 定义 可 多 处 调用 ， 增 加 代码 的 重复 使 用 ， 减 少 维护 成 本 。 


2.4 ”模板 中 的 表单 控件 


在 介绍 完 Angular 中 的 模板 内 容 定 义 的 方法 之 后 ， 接 下 来 介绍 模块 中 一 个 非常 重要 的 控件 一 一 表单 控件 。 表 单 是 各 类 控件 (如 input、select、textarea) 的 集合 体 ， 这 些 控件 依 
附 于 表单 ， 形 成 DOM 元 素 中 最 为 重要 的 数据 交互 元 素 ， 而 Angular 也 对 表单 中 的 控件 做 了 专门 的 包装 ， 其 中 最 重要 的 一 项 就 是 控件 的 自我 验证 功能 ， 接 下 来 我 们 逐一 进行 介绍 。 


2.5 ”本 章 小 结 


本 章 首先 从 最 基础 的 Angular 表 达 式 讲 起 ， 并 由 表达 式 的 使 用 过 渡 到 Angular 控 制 器 的 构建 ， 通 过 一 个 个 精心 设计 的 简单 示例 ， 详 细 介 绍 了 控制 器 的 定义 和 属性 、 方 法 的 添加 。 


然后 ， 通 过 控制 器 的 构建 引入 了 Angular 中 的 模板 概念 。 根 据 一 个 个 简单 实用 的 示例 ， 由 浅 入 深 地 带领 读者 逐一 掌握 模块 内 容 构建 、 复 制 元 素 、 添 加 样式 和 控制 元 素 显示 状态 的 方 
法 。 


最 后 ， 介 绍 了 模块 中 最 为 重要 的 表单 控件 ， 从 控件 的 基础 验证 功能 讲 起 ， 介 绍 表单 中 各 类 重要 控件 的 完整 使 用 方法 。 


本 章 内 容 旨 在 使 用 读者 初步 掌握 构建 一 个 简单 的 Angular 应 用 的 基本 步骤 ， 同 时 ， 也 为 下 一 章 的 学 习 打下 扎实 的 实践 基础 。 


第 3 章 Angular 的 过 滤器 和 作用 域 


在 第 2 章 介绍 完 Angular 中 的 基础 知识 后 ， 我 们 将 在 本 章 中 进一步 介绍 Angular 的 另外 两 个 重要 的 概念 一 一 过 滤器 和 作用 域 。 过 滤器 的 功能 是 格式 化 数据 表达 式 ， 只 要 有 数据 表达 
式 的 地 方 就 可 以 使 用 过 滤器 ， 如 页 面 模板 视图 、 控 制 器 ， 在 服务 中 都 可 能 使 用 过 滤器 ， 并 且 还 可 以 自 定义 过 滤器 。 与 过 滤器 单一 的 功能 不 同 ， 作 用 域 (scope) 是 Angular 中 的 另 一 个 
非常 重要 的 概念 ， 它 主要 服务 于 页 面 模板 ， 在 控制 器 与 页 面 中 起 桥梁 作用 ， 保 存 模板 中 的 数据 对 象 ， 为 模板 中 的 元 素 提供 方法 和 属性 。 在 本 章 中， 我 们 将 从 最 基础 的 概念 讲 起 ， 详 细 
介绍 它们 在 Angular 中 的 运用 。 


3.1 模板 中 的 过 滤器 


过 滤器 的 主要 功能 是 格式 化 数据 ， 这 里 所 说 的 数据 ， 既 包括 视图 模板 中 的 表达 式 ， 也 包括 控制 器 中 的 数组 或 对 象 。 开 发 人 员 不 仅 可 以 方便 地 调用 Angular 中 提供 的 过 滤器 ， 还 可 以 
自 定义 属于 自己 的 过 滤器 。 接 下 来 ， 我 们 通过 一 些 实用 的 案例 ， 来 介绍 过 滤器 的 强大 功能 。 
3.2 ”过 滤器 的 应 用 


在 上 一 节 介 绍 完 过 滤器 在 视图 模板 中 的 基本 用 法 后 ， 考 虑 到 它 在 Angular 中 格式 化 数据 的 重要 性 ， 在 本 节 中 ， 我 们 再 分 别 介绍 两 个 使 用 过 滤器 功能 应 用 一 一 表 头 排序 和 字符 查 
找 ， 进 一 步 巩 固 上 一 小 节 中 所 学 的 过 滤器 基础 知识 ， 掌 握 过 滤器 在 应 用 开发 中 的 使 用 方法 。 


3.3 ”作用 域 概述 


在 前 面 的 章节 中 我 们 曾经 介绍 过 $scope 对 象 ， 确 切 来 说 ， 它 的 实质 就 是 一 个 作用 域 对 象 。 从 对 这 个 对 象 的 使 用 ， 我 们 发 现 作 用 域 能 存储 数据 模型 、 为 表达 式 提供 上 下 文 环境 和 监 
听 表 达 式 的 变化 并 且 传播 事件 ， 它 是 页 面 视图 与 控制 器 之 间 的 重要 桥梁 ， 也 是 掌握 Angular 必 须知 道 的 基础 概念 ， 接 下 来 ， 我 们 详细 介绍 它 的 基础 功能 和 在 DOM 中 的 使 用 方法 。 


3.4 “作用 域 的 层级 和 事件 


与 页 面 中 DOM 模 型 相似 ， 作 用 域 在 绑 定 页 面 元 素 后 ， 便 依据 元 素 的 层次 关系 形成 了 自身 的 层级 关系 ， 而 在 这 些 层级 关系 中 ， 它 们 还 可 以 通过 事件 的 传播 进行 数据 的 通信 ， 只 是 这 
种 通过 事件 的 数据 通信 应 用 的 场景 非常 有 限 ， 仪 限于 父 和 子 级 之 间 的 作用 域 ， 接 下 来 我 们 逐一 进行 分 析 。 


3.5 本章 小 结 
在 本 章节 中 ， 先 从 Angular 中 的 一 个 重要 概念 一 一 过 滤器 讲 起， 以 由 浅 入 深 的 方式 ， 通 过 一 个 个 精 选 的 、 简 单 的 、 实 用 的 、 完 整 的 案例 ， 详 细 阅 述 了 过 滤器 在 Angular 中 的 应 用 场 
景 和 使 用 方法 ; 


此 外 ， 还 介绍 了 Angular 中 的 另 一 重要 知识 一 一 作用 域 ， 在 介绍 该 知识 点 时 ， 采 用 基础 理论 与 示例 相 结合 的 方式 ， 逐 步 深 入 地 介绍 了 在 Angular 中 运用 作用 域 开发 应 用 的 方法 与 技 
巧 。 通 过 本 章 的 学 习 ， 既 能 巩固 前 面 章节 的 所 学 知识 ， 又 可 以 为 接 下 来 章节 的 学 习 打 下 更 多 的 实践 基础 。 


第 4 章 Angular 的 依赖 注入 


在 日 常 的 代码 编写 过 程 中 ， 程 序 的 依赖 现象 并 不 少见 ， 如 使 用 new 方 法 创建 一 个 实例 对 象 ， 而 这 个 新 创建 的 对 象 ， 则 依赖 于 new 后 面 的 原 对 象 ， 这 种 方式 称 为 创建 性 依赖 。 很 明 


显 这 种 创建 性 依赖 的 方式 并 不 利用 代码 的 测试 和 内 部 依赖 关系 的 修改 ， 调 用 也 显得 很 复杂 。 


而 在 Angular 中 ， 代 和 码 间 的 依赖 处 理 则 非常 轻松 ， 通 过 Angular 中 特有 的 依赖 注入 方式 ， 将 依赖 的 对 象 轻松 注入 任意 需要 的 地 方 ， 而 且 不 必 关 注 被 注入 对 象 本 身 的 逻辑 ， 这 种 方式 
减轻 了 代码 开发 量 ， 并 且 提 高 了 工作 效率 。 本 章 将 从 最 基础 的 概念 讲 起 ， 详 细 介绍 依赖 注入 的 原理 和 方法 。 


4.1 依赖 注入 介绍 


“依赖 注入 ”， 从 字面 上 来 说 ， 它 分 为 两 个 部 分 : 一 是 依赖 ， 另 一 部 分 是 注入 。 也 就 是 说 ， 当 一 个 对 象 在 建立 时 ， 需 要 依赖 于 另 一 个 对 象 ， 这 是 代码 层 的 一 种 “依赖 ”关系 ; 当 
在 代码 中 声明 了 依赖 关系 之 后 ，Angular 通 过 injector 注 入 器 将 所 依赖 的 对 象 进行 “注入 ”操作 。 


4.2 依赖 注入 标记 


在 上 一 节 中 我 们 说 过 ， 每 个 Angular 应 用 都 是 由 注入 器 (injector) 负责 查找 和 创建 依赖 注入 的 服务 ， 而 这 个 注入 器 本 质 上 来 说 就 一 个 服务 的 定位 器 ， 它 可 以 快速 地 定位 到 应 用 中 
需要 注入 的 各 种 服务 ， 而 在 服务 定位 的 过 程 中 ， 需 要 应 用 提供 一 些 注入 时 依赖 的 标记 ， 通 过 这 些 标记 ， 告 诉 注入 器 需要 注入 什么 样 的 依赖 服务 ， 而 这 些 标记 ， 就 是 依赖 注入 标记 。 


根据 依赖 注入 标记 声明 的 方式 不 同 ， 可 以 将 它们 分 为 3 种 形式 : 推断 式 注入 、 标 记 式 注入 和 行内 式 注入 。 接 下 来 ， 我 们 逐一 对 上 述 3 种 形式 进行 详细 的 说 明 。 


4.3 ”$injector 常 用 API 


在 上 面 的 章节 中 ， 我 们 一 直 在 介绍 依赖 注入 的 概念 ， 而 Angular 在 依赖 注入 的 过 程 中 ， 离 不 开 一 个 重要 的 对 象 -一 一 注入 器 ($injector) 。 整 个 Angular 应 用 中 的 注入 对 象 都 由 它 
负责 定位 和 创建 ， 它 有 很 多 实用 的 API 方 法 ， 其 中 比较 重要 的 如 get、has 和 invoke 方 法 等 。 接 下 来 ， 我 们 重点 介绍 一 下 这 些 API 方 法 的 使 用 过 程 ， 便 于 我 们 深入 理解 依赖 注入 的 概念 。 


4.4 本 章 小 结 


依赖 注入 是 Angular 中 一 个 非常 重要 的 基础 概念 ， 只 要 构建 Angular 应 用 ， 就 会 用 到 依赖 注入 ， 这 也 是 Angular 的 一 个 明显 的 特征 。 本 章 先 从 Angular 的 工作 原理 讲 起 ， 然 后 通过 
大 量 简单 易学 的 示例 介绍 Angular 中 依赖 注入 的 各 种 声明 标记 和 $injector 中 API 使 用 方法 ， 最 后 介绍 依赖 注入 的 常用 场景 ， 使 读者 进一步 巩固 之 前 所 学 的 使 用 知识 ， 为 下 面 章节 的 学 习 
打下 基础 。 


第 5 章 Angular 中 MVC 模 式 


与 其 他 前 端 框架 相 比 ，Angular 还 有 一 项 “特殊 ”的 功能 ， 就 是 它 在 前 端 框架 中 也 能 实现 MVC 的 开发 模式 。 之 所 以 说 “特殊 ”， 是 因为 在 通常 情况 下 ，MVC 的 模式 多 是 用 于 服务 
端的 开发 ， 前 端 框架 很 少 能 实现 这 样 的 开发 模式 ， 而 Angular 则 是 这 种 模式 的 优秀 实践 者 。 


Angular 将 用 于 服务 端的 MVC 模 式 进行 了 优化 ， 整 合 到 自己 的 基础 模式 中 ， 因 此 ，Angular 中 的 MVC 模 式 不 仅 将 Web 应 用 分 解 成 各 自 独立 的 三 层 (表现 、 逻 辑 、 数 据 ) 组 件 ， 而 
且 使 应 用 更 加 结构 化 ， 开 发 和 测试 更 加 方便 。 同 时 ， 各 层 间 的 耦合 性 也 非常 低 。 


本 章 将 从 最 基础 的 理论 知识 讲 起 ， 详 细 地 介绍 Angular 中 MVC 的 模式 框架 ， 深 入 剖析 Mode、Controller 和 View 各 个 整合 后 组 件 的 功能 和 实现 方法 。 


5.1 ”MVC 模式 概述 


严格 来 说 ，MVC 是 用 于 服务 端的 一 种 设计 模式 ， 但 随 着 客户 端 复杂 性 的 日 益 增 大 ， 也 有 类 似 于 服务 端的 MVC 框 架 模式 在 客户 端 中 应 用 ，Angular 就 是 其 中 最 突出 的 一 个 代表 。 分 
离 关注 是 这 种 模式 的 一 个 基本 原则 ， 各 层 之 间 仅 是 单 向 的 依赖 关系 ， 相 互 间 的 耦合 度 非 常 低 。 


5.2 Model 组 件 


在 介绍 完 Angular 中 MVC 的 基础 概念 后 ， 接 下 来 重点 分 析 每 个 MVC 的 组 成 部 分 。 首 先 介绍 Model 组 件 ， 它 是 MVC 模 式 下 的 重要 组 成 部 分 ， 在 该 组 件 中 ， 可 以 存储 和 处 理 数据 ， 
同时 ， 还 可 以 在 组 件 中 自 定义 模板 ， 通 过 模板 实现 与 界面 (View) 层 的 通信 和 数据 交互 。 


5.3 Controller 组 件 


在 通常 的 MVC 模 式 下 ，(C 指 的 是 控制 层 。 而 对 Angular 而 言 ，C 指 的 则 是 Controller 组 件 ， 即 应 用 的 控制 器 ， 它 的 本 质 是 一 个 JavaScript 函 数 ， 用 于 衔接 页 面 模板 和 逻辑 代码 ， 并 
通过 添加 对 象 和 行为 来 增强 模板 中 作用 域 的 功能 。 接 下 来 ， 我 们 详细 介绍 Controller 组 件 的 各 项 功能 。 


5.4 _ View 组件 


吸 


六] 


在 Angular 的 MVC 模 式 下 ，V 指 的 就 是 视 
器 模型 修改 后 所 包含 的 DOM 元 素 。 


层 ， 即 View 组 件 ， 但 这 种 组 件 并 不 是 普通 的 视图 模板 元 素 ， 准 确 来 说 ， 它 是 先 经 过 浏览 器 加 载 并 演 染 后 ， 再 根据 视图 模板 和 对 应 控制 


D 


六 


View 组 件 是 多 方 作用 下 的 结果 ， 这 也 使 得 它 的 最 终 展 示 并 不 是 独立 的 ， 它 的 外 形 取 决 于 视图 模板 ， 内 部 数据 来 源 于 控制 器 。 所 以 ， 可 以 通过 ng-View 指 令 加 载 和 切换 视图 模板 ， 
并 将 视图 组 件 通过 ng-Controller 指 令 与 控制 器 相 绑 定 。 后 者 在 介绍 控制 器 时 有 过 详细 的 说 明 ， 接 下 来 将 重点 介绍 View 组 件 加 载 和 切换 视图 模板 的 功能 。 
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5.5 本章 小 结 


本 章 共 分 为 4 节 : 首先 ， 从 MVC 的 概念 讲 起 ; 然后 ， 分 别 介绍 了 模型 (Model) 、 控 制 器 (Controller) 和 视图 (View) 各 个 组 件 的 概念 ， 通 过 一 个 个 简单 、 完 整 的 实例 ， 详 细 
介绍 了 它们 在 Angular 应 用 中 各 项 功能 实现 的 过 程 ， 为 读者 全 面 了 解 并 掌握 如 何在 Angular 中 使 用 MVC 模 式 开发 应 用 ， 打 下 扎实 的 理论 和 实践 基础 。 


第 6 章 Angular 的 服务 


在 前 面 的 章节 中 ， 我 们 一 直 介 绍 的 是 页 面 展示 和 控制 层 的 知识 ， 即 视图 模板 和 控制 器 代码 的 编写 。 但 作为 一 个 Angular 应 用 ， 当 它 在 切换 路 由 或 重 载 地 址 时 ， 出 于 对 内 存 性 能 的 考 
虑 ， 控 制 器 中 原 有 的 数据 在 不 需要 时 都 将 被 Angular 清 除 ， 在 需要 时 重新 被 实例 化 。 为 了 克服 这 种 现象 ， 提 升 代码 工作 效率 ， 我 们 将 在 本 章 介绍 Angular 中 的 另外 一 个 重要 知识 一 一 服 
务 。 


服务 是 Angular 的 一 个 关键 特性 ， 它 的 本 质 是 一 些 和 控制 器 捆绑 在 一 起 的 可 替换 的 对 象 ， 通 过 这 些 对 象 提供 了 在 应 用 的 整个 生命 周期 都 存 有 数据 方法 。 当 重 载 或 刷新 页 面 时 ， 数 据 
不 会 被 清除 ， 而 且 还 与 加 载 之 前 保持 一 致 。 鉴 于 服务 在 Angular 中 的 重要 性 ， 本 章 将 从 最 基础 的 知识 点 讲 起 ， 通 过 一 个 个 精 选 示例 ， 逐 步 带 领 大 家 进入 Angular 中 的 服务 世界 。 


6.1 Angular 服 务 介 绍 


在 Angular 中 服务 是 一 种 单 例 对 象 。 所 谓 单 例 ， 指 的 是 服务 在 每 一 个 应 用 中 只 会 被 实例 化 一 次 ， 并 且 是 在 需要 时 异步 进行 加 载 。 服 务 的 主要 功能 是 为 实现 应 用 的 功能 提供 数据 和 对 
象 。 按 照 功 能 的 不 同 ， 它 又 可 以 分 为 内 置 和 自 定义 的 服务 ， 接 下 来 我 们 要 详细 介绍 这 两 类 服务 的 使 用 方法 。 


6.2 ”创建 Angular 服 务 


通过 上 一 节 的 学 习 ， 我 们 知道 ， 在 Angular 中 创建 自己 的 服务 非常 方便 ， 只 需要 先 构 建 一 个 模块 (Module) ， 然 后 在 构建 过 程 中 调用 内 置 的 $provide 服 务 ， 通 过 该 服务 的 工厂 函 
数 来 创建 属于 自己 的 Angular 服 务 。 除 此 之 外 ， 还 可 以 直接 调用 模块 中 的 factory、service、constant 和 value 等 方法 来 创建 。 接 下 来 ， 我 们 对 每 一 个 方法 进行 详细 的 介绍 。 


6.3 ”管理 服务 的 依赖 


当 我 们 在 Angular 中 创建 自己 的 服务 时 ， 可 能 还 需要 依赖 其 他 对 象 的 注入 ， 这 种 注入 的 方式 与 控制 器 注入 其 他 对 象 一 样 ， 可 以 在 创建 服务 的 方法 参数 中 隐 式 指明 ， 也 可 以 采用 在 方 
法 参数 中 添加 数组 进行 说 明 的 方式 ， 或 者 将 需要 注入 的 对 象 名 定义 为 数组 ， 并 设置 成 gjnject 属 性 值 。 此 外 ， 还 可 以 在 自 定义 的 服务 中 将 另外 一 个 自 定义 的 服务 作为 依赖 项 进行 注入 ， 


形成 谋 套 服务 的 形式 。 接 下 来 ， 我 们 将 详细 介绍 这 些 服务 依赖 项 的 管理 。 


6.4 添加 服务 的 其 他 设置 


在 Angular 中 ， 创 建 好 的 服务 就 是 一 项 数据 请 求 和 处 理 的 集合 ， 在 后 续 开 发 中 要 修改 ， 相 对 来 说 是 非常 困难 的 ， 特 别 是 一 些 内 置 的 服务 ， 修 改 这 些 服务 可 能 要 改动 整体 Angular 框 
架 文 件 ， 面 临 的 风险 非常 高 。 


针对 上 述 的 问题 ， 在 Angular 中 ， 专 门 为 服务 添加 了 一 些 设置 项 ， 如 装饰 器 (decorator) ， 通 过 它 可 以 在 不 修改 原 有 服务 代码 的 情况 下 ， 添 加 一 些 其 他 的 功能 。 此 外 ， 服 务 对 象 
在 调用 过 程 中 ， 是 单 例 的 ， 也 可 以 通过 修改 代码 的 方式 返回 非 单 例 的 服务 对 象 。 


6.5 本章 小 结 


服务 是 Angular 中 一 个 非常 重要 的 概念 ， 也 是 学 习 Angular 必 须要 掌握 的 知识 点 ， 因 此 ， 本 章 主要 围绕 服务 来 展开 介绍 。 


先 从 介绍 服务 的 类 型 开始 ， 接 着 采用 由 浅 入 深 的 方式 ， 通 过 一 个 个 精 选 的 示例 介绍 了 服务 创建 的 方法 ， 然 后 讲解 了 如 何 管理 服务 注入 时 的 依赖 关系 ， 最 后 ， 还 介绍 了 修改 一 个 服 
务 时 需要 调用 的 装饰 器 功能 ， 对 创建 多 例 的 服务 也 进行 了 详细 的 说 明 。 通 过 本 章 的 学 习 ， 上 旨 在 使 读者 了 解 并 掌握 如 何 创 建 一 个 服务 的 方法 ， 为 开发 Angular 应 用 打下 基础 。 


第 7 章 Angular 与 服务 端 交互 


在 前 面 的 章节 中 ， 我 们 一 直 在 介绍 Angular 框 架 内 部 的 功能 ， 执 行 的 页 面 都 是 在 本 地 ， 这 并 不 完整 ， 因 为 无 论 是 开发 Web 应 用 ， 还 是 构建 前 端 框 架 ， 都 离 不 开 与 服务 端的 交互， 
客户 端的 页 面 必须 结合 服务 端的 AP1， 才 能 打造 一 款 功 能 强大 的 精品 应 用 。 


在 Angular 框 架 的 内 部 ， 封 装 了 许多 的 服务 模块 ， 供 开发 者 与 服务 端 交互 时 调用 ， 如 $http 和 $resource 等 众多 的 服务 。 同 时 ， 应 用 内 部 的 缓存 机 制 可 加 速 交互 时 的 数据 通信 ， 通 
过 $resource 服 务 快速 响应 服务 端的 REsTfu| 方 式 的 资源 请 求 ， 高 效 地 处 理 客户 端 与 服务 端 间 的 数据 交互 。 


学 习 并 掌握 Angular 与 服务 端 交 互 的 方法 ， 是 学 好 Angular 框 架 的 一 个 重要 标志 。 本 章 中 将 从 最 底层 的 模块 交互 对 象 开始 ， 详 细 介 绍 Angular 框 架 各 个 服务 模块 与 服务 端 交互 的 全 
部 过 程 ， 旨 在 使 读者 通过 本 章 的 学 习 ， 全 面 掌握 使 用 Angular 与 服务 端 通信 的 方法 与 技巧 。 


7.1 与 服务 端 交互 介绍 


如 果 仅 仅 是 使 用 Javascript 代 码 ， 需 要 实现 与 服务 端的 数据 通信 ， 那 么 ， 我 们 会 使 用 AJAX 方 式 ， 初 始 化 XHR 对 象 ， 调 用 对 象 的 send 方 法 发 送 数据 请 求 ， 并 以 异步 的 方式 获取 请 求 
返回 内 容 。 这 种 方式 非常 普遍 ， 而 Angular 中 的 $http 服 务 则 是 将 这 种 方法 进行 了 简单 的 封装 ， 打 包 成 一 个 服务 模块 的 形式 提供 给 开发 者 使 用 。 接 下 来 ， 我 们 来 详细 介绍 一 下 它们 执行 


7.2 Angular 中 的 缓存 


缓存 是 Web 开 发 中 一 个 非常 重要 的 概念 ， 它 的 核心 组 成 是 一 个 个 键 key/ 值 value 存 储 集合 ， 其 中 ， 一 个 键 对 应 一 块 缓存 内 容 ， 如 果 需 要 请 求 缓存 内 容 时 ， 发 现 对 应 的 键 存在 且 有 
效 ， 才 直接 通过 键 返 回 对 应 的 缓存 内 容 ; 如 果 发 现 对 应 的 键 不 存在 或 无 效 ， 则 重新 获取 原始 数据 ， 并 根据 键 名 将 对 应 的 缓存 内 容 写 入 存储 集合 中 ， 以 便 下 次 使 用 。 


缓存 的 功能 就 是 加 快 获取 内 容 的 速度 ， 减 少 重复 请 求 ， 这 是 一 项 非常 重要 的 作用 。 因 此 ， 在 Angular 框 架 中 ， 提 供 了 专门 的 服务 一 一 $cacheFactory 来 生成 缓存 对 象 ， 同 
时 ，$http 服 务 中 还 可 以 开启 缓存 、 自 定义 默认 缓存 名 称 。 接 下 来 ， 我 们 逐一 进行 介绍 。 


7.3 $resource 服 务 


与 $http 服 务 相 比 而 言 ，$resource 的 服务 功能 更 为 强大 ， 不 仅 如 此 ， 它 的 核心 价值 在 于 能 为 支持 RESTful 的 服务 器 进行 无 缝隙 的 数据 交互 ， 而 这 种 交互 是 数据 模型 方式 的 对 接 ， 通 
过 它 抽象 剥离 出 来 的 方法 ， 无 须 开发 者 编写 大 量 代 码 ， 就 可 以 实现 许多 复杂 的 功能 。 


在 调用 $resource 服 务 后 ， 返 回 的 $resource 对 象 中 包含 了 多 种 与 服务 端 进行 交互 的 AP1， 像 get、save 和 query 等 ， 开 发 人 员 只 需 调用 就 可 以 实现 对 数据 的 基本 操作 功能 。 此 外 ， 
在 请 求 $resource 服 务 时 ， 还 允许 自 定义 请 求 的 方法 ， 使 用 非常 灵活 。 接 下 来 ， 我 们 详细 介绍 它 的 具体 功能 。 


7.4 ”promise 对 象 
promise 是 什么 ? 要 了 解 它 ， 需 要 先 从 我 们 面临 的 问题 开始 讲 起 。 在 操作 AJAX 异 步 请 求 时 ， 必 须 添加 一 个 callback 函 数 ， 用 于 处 理 清 求 成 功 后 的 坎 辑 ， 但 这 种 方式 是 以 辐 牧 控制 


流 、 异 常 处 理 为 代价 的 ， 并 且 还 有 可 能 陷入 callback 函 数 嵌 套 中 ， 流 程 复杂 ， 代 码 腑 肿 。 


为 了 解决 这 种 情况 ， 我 们 引入 了 promise 对 象 这 个 概念 ， 确 切 地 说 ， 它 是 一 种 处 理 异步 编程 的 模式 ， 可 以 有 效 解决 回调 的 烦琐 ， 并 以 一 种 同步 的 方式 去 处 理 业务 流程 。 同 时 ， 人 允 
许 在 回调 中 采用 链 式 写法 ， 处 理 的 代码 更 加 优雅 。 接 下 来 ， 我 们 详细 说 明 promise 的 使 用 方法 。 


7.5 “本章 小 结 


本 章 是 学 习 Angular 非 常 重要 的 一 个 章 ， 因 为 前 端 页 面 的 开发 离 不 开 服务 端的 支持 。 在 本 章 中 ， 首 先 ， 从 最 基础 的 前 端 页 面 与 服务 端 交 互 的 AJAX 请 求 进 起 ， 以 渐进 的 方式 介绍 了 
$http 的 基础 概念 和 常用 API。 接 下 来 ， 通 过 一 个 个 示例 讲述 了 在 请 求 过 程 中 缓存 的 调用 和 技巧 。 最 后 ， 采 用 概念 与 示例 相 结合 的 方式 介绍 了 $resource 和 promise 对 象 的 详细 使 用 过 
程 。 通 过 本 章 的 学 习 ， 不 仅 可 以 全 面 了 解 Angular 中 页 面 与 服务 端 交互 的 原理 ， 而 且 为 构建 一 个 属于 自己 的 Angular 应 用 打下 扎实 的 理论 与 实践 基础 。 


第 8 章 ”Angular 的 指令 


指令 是 Angular 的 一 个 特殊 标志 ， 也 是 有 别 于 其 他 框架 的 一 个 重要 特征 ，Angular 之 所 以 功能 强大 ， 在 很 大 程度 上 得 益 于 它 拥有 大 量 内 置 的 指令 ， 也 能 通过 语法 自 定义 指令 。 可 以 
说 指令 是 开发 Angular 应 用 时 一 个 非常 重要 的 道具 ， 尤 其 是 自 定义 的 指令 。 


指令 是 Angular 的 一 个 重要 组 成 部 分 ， 学 习 Angular 中 的 指令 必须 先 了 解 内 置 指令 的 详细 使 用 功能 ， 掌 握 它 的 执行 过 程 。 此 外 ， 还 要 学 会 自 定义 指令 的 方法 。 通 常 在 开发 应 用 中 ， 
既 有 的 指令 并 不 能 满足 各 类 需求 变化 ， 必 须 结合 需求 自 定义 指令 ， 因 此 ， 在 本 章 的 学 习 中 ， 除 介绍 内 置 的 Angular 指 令 使 用 方法 之 外 ， 将 重点 讲述 在 自 定 义 指令 时 ， 各 个 属性 的 详细 使 
用 过 程 。 


8.1 Angular 指 令 概述 


从 字面 意义 来 说 ，“ 指 令 ” 是 一 种 执行 的 信号 ， 一 旦 发 布 了 这 个 指令 ， 就 要 执行 某 项 动作 。 如 在 HTML 中 ， 书 写 一 个 <a> 标 记 ， 实 质 上 也 是 一 个 指令 ， 告 知 浏览 器 的 编译 系统 ， 
要 创建 一 个 超级 链接 ; 在 Angular 中 ， 指 令 就 要 复杂 许多 ， 它 不 仅 要 创建 元 素 ， 而 且 还 给 元 素 附加 了 一 些 特 定 的 行为 ， 因 此 ，Angular 中 的 指令 是 一 个 在 特定 DOM 元 素 上 执行 的 函 


8.2 ”Angular 指 令 对 象 的 重要 属性 


在 前 面 的 章节 中 ， 我 们 介绍 了 定义 指令 时 的 一 些 基础 属性 的 使 用 方法 ， 接 下 来 我 们 再 介绍 其 他 重要 的 属性 ， 如 transclude、link 和 compile 属 性 ， 这 些 属性 是 定义 指令 时 的 重要 组 
成 部 分 ， 也 是 学 习 指 令 的 难点 。 下 面 ， 我 们 通过 示例 来 介绍 它们 的 使 用 方法 。 


8.3 Angular 指 令 对 象 的 scope 属 性 


相对 于 其 他 的 指令 属性 而 言 ，scope 属 性 的 功能 要 强大 很 多 ， 使 用 的 频率 也 很 高 ， 因 此 ， 有 必要 通过 一 节 来 详细 介绍 这 个 属性 的 使 用 情况 。 确 切 地 说 ，scope 属 性 值 包含 两 种 类 
型 ， 一 类 是 布尔 值 ， 另 一 类 为 JJON 对 象 。 接 下 来 介绍 这 两 种 不 同类 型 的 使 用 情况 。 


8.4 Angular 指 令 对 象 的 require 和 controller 属 性 


接 下 来 ， 我 们 介绍 定义 指令 对 象 时 可 以 添加 的 最 后 两 个 属性 require 和 controller， 这 两 个 属性 常用 于 多 个 自 定义 的 指令 元 素 吝 套 时 使 用 ， 即 当 一 个 子 元 素 指令 需要 与 父 元 素 指令 
通信 时 ， 就 需要 添加 并 使 用 这 两 个 属性 值 ， 下 面 我 们 来 分 别 进行 介绍 。 


8.5 ”本 章 小 结 


自 定义 指令 不 仅 是 Angular 框 架 中 一 个 非常 重要 的 功能 ， 而 且 它 还 能 为 我 们 开发 可 复 用 的 控件 提供 强大 的 支持 ， 因 此 ， 学 习 和 掌握 本 章 内 容 十 分 重要 。 


本 章 首先 从 最 基础 的 创建 指令 的 概念 讲 起 ; 然后 ， 再 由 浅 入 深 地 介绍 了 在 自 定 义 指 令 时 ，transclude、link、compile 和 scope 属 性 的 使 用 方法 和 技巧 ; 最 后 ， 通 过 一 个 简单 的 示 
例 介绍 require 和 controller 这 两 个 属性 使 用 的 方法 。 


第 9 章 使 用 $location 


在 开发 Web 页 面 过程 中 ， 经 常 使 用 location， 用 于 刷新 页 面 或 跳 转 到 某 个 指定 的 URL 地 址 。 在 Angular 中 ， 这 些 功能 都 被 优雅 地 封装 成 到 一 个 名 为 “$location” 的 服务 中 ， 借 助 
这 个 服务 提供 的 AP1， 不 仅 可 以 实现 在 Javascript 代 码 中 location 对 象 的 所 有 功能 ， 而 且 这 个 服务 还 与 Angular 框 架 集合 在 一 起 ， 使 用 非常 方便 。 


使 用 $location 服 务 不 仅 可 以 解析 地 址 栏 中 的 URL 地 址 ， 还 能 将 解析 后 的 URL 地 址 运用 到 $location 服 务 对 象 中 ， 使 地 址 栏 中 的 URL 和 $location 服 务 在 各 自 变化 时 产生 互动 效果 。 此 
外 ，$location 服 务 中 还 内 置 了 许多 有 用 的 方法 和 事件 ， 还 可 以 注入 其 他 的 服务 ， 实 现 更 加 强大 的 功能 。 


9.1 初 识 $location 


$location 服 务 封装 了 原始 JavaScript 中 location 对 象 的 属性 和 方法 ， 因 此 ， 它 可 以 轻松 获取 地 址 栏 中 的 URL 地 址 ， 同 时 ， 还 能 动态 修改 获取 的 URL 地 址 ， 并 应 用 到 地 址 栏 中 。 


9.2 ”$location 对 象 的 事件 


当 通 过 $location 对 象 修改 URL 地 址 时 ， 将 会 触发 多 个 $location 对 象 内 置 的 事件 ， 在 改变 URL 地 址 前 ， 将 触发 $locationChangeStart 事 件 ， 该 事件 可 以 被 preventDefault 方 法 阻 
止 ，URL 地 址 成 功 修改 后 ， 将 触发 $locationChangeSuccess 事 件 。 通 过 绑 定 这 些 事件 ， 可 以 侦 测 用 户 的 登录 和 授权 的 状态 ， 并 根据 这 些 状态 进行 下 一 步 的 操作 。 


9.3 ”路 由 模式 和 地 址 变更 


路 由 的 模式 分 为 标签 (hashbang) 和 HTML5 两 种 模式 。 在 浏览 器 的 地 址 栏 中 ， 不 同 的 路 由 模式 将 导致 地 址 栏 中 URL 格 式 的 不 同 ; 在 开发 Angular 应 用 时 ， 可 以 在 模板 加 载 时 ， 手 
动 设置 路 由 的 两 种 模式 ， 这 两 种 模式 既 有 关联 又 存在 区 别 ; 此 外 ， 还 可 以 实现 路 由 对 象 方法 的 双向 绑 定 ， 接 下 来 我 们 详细 介绍 两 种 模式 使 用 方法 。 


9.4 本章 小 结 


在 本 章 中 ， 先 从 路 由 ($location) 的 基础 知识 讲 起 ， 介 绍 了 它 的 获取 和 重 置 内 容 的 实现 方法 。 接 下 来 ， 以 演示 简单 示例 的 方式 ， 向 读者 介绍 了 浏览 器 在 进行 路 由 过 程 中 触发 的 相 
应 事件 ， 以 及 处 理事 件 代码 和 编写 代码 时 的 一 些 技巧 。 


最 后 ， 重 点 介绍 了 路 由 的 执行 模式 ， 通 过 一 个 个 简单 高 效 的 示例 ， 详 细 介绍 了 路 由 模式 所 涉及 的 方方面面 。 相 信 通 过 本 章 的 学 习 ， 读 者 能 够 全 面 了 解 并 掌握 路 由 (location) 的 
基础 和 使 用 方法 ， 为 下 面 章节 的 学 习 打 下 基础 。 


第 10 章 ”使 用 Angular 开 发 的 注意 事项 和 最 佳 实践 


与 其 他 前 端 框架 不 同 ，Angular 是 一 款 全 新 的 前 端 MVC 框 架 ， 对 于 初学 者 来 说 ， 需 要 学 习 很 多 的 新 概念 ， 因 此 ， 非 常 容易 出 现 各 种 类 型 的 错误 ， 导 致 代码 的 效率 和 质量 都 不 高 。 


为 了 规避 这 种 情况 ， 提 升 初学 者 对 Angular 的 掌握 技能 ， 在 本 章 中 ， 我 们 将 通过 一 个 个 实践 中 的 案例 ， 向 读者 展示 在 使 用 Angular 开 发 前 端 应 用 过 程 中 需要 注意 的 事项 和 一 些 实用 的 实 


践 技巧 。 


10.1 页 面 元 素 的 控制 


客观 地 说 ， 使 用 了 Angular 框 架 ， 建 议 就 不 要 再 调用 Query 框 架 ， 以 避免 两 者 之 间 在 调用 方法 时 发 生 冲 突 。 另 外 ，Angular 内 含 jQLite 一 一 它 是 Query 的 一 个 子 集 ,许多 简单 功 
能 、 方 法 以 及 页 面 元 素 操作 、 事 件 绑 定 功能 都 可 以 直接 通过 该 框架 来 实现 ， 而 Angular 中 的 $http 服 务 则 完全 可 以 取代 jQuery 框架 中 的 $.ajax 的 相关 函数 。 


因此 ， 初 学 者 在 使 用 Angular 开 发 应 用 时 ， 需 要 尽量 避免 调用 jQuery 框架 来 定位 元 素 ， 包 括 增加 或 删除 节点 元 素 ， 而 应 该 尽量 调用 Angular 中 的 方法 或 编写 自己 的 指令 
(directives) 来 实现 。 


此 外 ， 在 Angular 中 ， 许 多 原 有 的 Javascript 广 法 在 绑 定 元 素 属性 时 ， 并 不 能 实现 相应 的 功能 ， 而 必须 调用 Angular 中 的 内 部 方法 ， 如 setTimeout 方 法 。 同 时 ， 使 用 双 大 括号 的 方 
式 绑 定 页 面 元 素 时 ， 在 首次 加 载 中 ， 会 出 现 闪 烁 的 效果 。 接 下 来 我 们 逐一 进行 介绍 。 


10.2 ”使 用 ng-repeat 时 的 注意 事项 


在 Angular 中 ，ng-repeat 是 一 个 非常 重要 的 内 部 指令 ， 它 的 功能 是 在 遍历 数组 过 程 中 生成 DOM 元 素 ， 实 现在 页 面 中 展示 列表 数据 中 的 功能 ， 功 能 强大 、 使 用 简单 ， 但 如 果 使 用 
不 当 也 容易 出 现 一 些 问题 ， 具 体 表现 如 下 。 


在 使 用 过 程 中 ， 如 果 有 过 滤器 时 ， 调 用 $index 并 不 能 准确 定位 到 对 应 的 记录 。 另 外 ， 在 调用 ng-repeat 指 令 重新 请 求 数据 ， 并 不 是 在 原来 DOM 元 素 中 更 新 数据 ， 而 是 再 次 新 建 
DOM 元 素 。 此 外 ， 在 通过 ng-repeat 指 令 生成 的 子 元 素 中 ， 如 果 通 过 父 的 scope 对 象 更 新 数据 时 ， 不 能 直接 更 新 遍历 的 数组 源 ， 而 必须 逐个 更 新 。 接 下 来 通过 示例 逐一 进行 介绍 。 


10.3 ”解决 单 击 按钮 事件 中 的 冒 泡 现象 


冒 泡 事件 是 DOM 元 素 中 的 一 种 事件 类 型 ， 简 单 而 言 ， 当 单 击 子 节点 元 素 时 ， 会 向 上 触发 父 节点 、 祖 先 级 节点 的 单 击 事件 ， 出 现 冒 泡 现象 会 导致 许多 父 级 的 事件 被 自动 触发 ， 页 面 
效果 无 法 控制 ， 因 此 ， 必 须 解决 这 种 元 素 的 冒 泡 事件 。 


解决 的 方法 是 ， 当 子 节点 元 素 触发 单 击 事件 后 ， 就 需要 终止 该 事件 的 冒 泡 ， 终 止 的 方法 是 调用 事件 本 身 的 stopPropagation 方 法 ， 即 event.stopPropagation， 该 方法 的 功能 是 终 
事件 的 传播 ， 在 事件 的 节点 上 调用 事件 后 ， 不 再 将 事件 分 派 到 其 他 节点 上 。 


从 上 述 的 介绍 我 们 可 以 看 出 ， 昌 然 DOM 元 素 存在 冒 泡 事件 的 现象 ， 但 只 要 调用 事件 自身 的 stopPropagation 方 法 ， 就 可 以 阻止 这 种 冒 泡 事件 的 狸 发 ， 在 Javascript 代 码 中 是 可 以 
实现 的 。 那 么 ， 在 Angular 中 ， 是 否 也 可 以 通过 事件 的 这 个 方法 来 阻止 事件 的 冒 泡 现象 呢 ? 答案 是 肯定 的 。 


接 下 来 ， 通 过 一 个 简单 的 示例 来 演示 Angular 中 阻止 事件 冒 泡 现象 的 过 程 。 


示例 10-7 ”解决 单 击 按钮 事件 中 的 冒 泡 现 象 


(1) 功能 描述 


在 页 面 中 ， 添 加 一 个 复 选 框 元 素 ， 并 将 它 的 值 绑 定 ng-model 指 令 。 另 外 ， 再 添加 一 个 按钮 元 素 ， 当 单 击 该 按钮 时 ， 将 根据 复 选 框 的 选中 状态 ， 如 果 选 中 ， 则 阻止 按钮 单 击 时 的 冒 
泡 现象 ， 否 则 ， 不 阻止 按钮 单 击 时 的 冒 泡 现象 。 


(2) 实现 代码 


新 建 一 个 HTML 文 件 10-7.html， 加 入 如 代码 清单 10-7 所 示 的 代码 。 


代码 清单 10-7 解决 单 击 按钮 事件 中 的 冒 泡 现象 


<!DOCTYPE html> 
<html ng-app="al0 7"> 
<head> 
<title> 解 决 点 击 按钮 事件 中 的 冒 泡 现象 </title> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/../Script/angular.min.js"></script> 
<style type="text/css"> 
.frame { 
pagdding: 5px 8px; 
margin: Opx; 
font-size: 12px; 
width: 320px; 
background-color: #eee; 


.frame div { 
margin: 10px Opx; 
} 


</style> 
</head> 
<body> 
<div ng-controller="c10 7 as o" class="frame"> 
<div ng-click="o.click(' 父 级 ', $event) "> 
在 按钮 的 单 击 事件 中 ， 阻 止 冒 泡 现象 
be > 
<input type="checkbox" ng-click="o.change ($event)" 
ng-model="o.stopPropagation" /> 是 否 阻止 冒 泡 
<br /><br /> 
<button type="button™ 
ng-click="o.click(' 按 钮 ', Sevent) "> 点 击 我 <C/button> 
</div> 
</div> 
<script type="text/javascript"> 
angular.module('al0 7', []) 
.controller('c10 7', function ($scope) { 
Var obj = this; 
obj .click = function (name, $event) { 
console.1og (name + "被 甬 发 "); 
if (obj.stopPropagation) { 
$event .stopPropagation (); 
} 
}; 
obj.change = function ($event) { 
S$event .stopPropagation (); 
$ 


return obj; 


</script> 
</body> 
</html> 


(3) 页 面 效 果 
执行 HTML 文 件 10-7.html， 最 终 实 现 的 页 面 效 果 如 图 10-7 所 示 。 
(4) 源码 分 析 


在 本 示例 的 代码 中 ， 当 用 户 单 击 按钮 时 ， 将 触发 控制 器 中 自 定义 的 click 方 法 ， 该 方法 需要 传 入 两 个 实 参 ， 一 个 是 触发 事件 的 元 素 名 称 ， 如 “按钮 ”， 另 一 个 是 Angular 内 部 的 常 
量 一 yevent。 在 Angular 中 ， 当 元 素 执行 事件 函数 时 ， 将 通过 $event 常 量 返回 当前 触发 事件 的 对 象 元 素 ， 因 此 ， 可 以 调用 这 个 返回 常量 的 stopPropagation 方 法 来 阻止 元 素 事件 的 
冒 泡 现象 。 


在 自 定义 的 click 方 法 中 ， 接 收 到 传 回 的 元 素 名 称 和 $event 常 量 后 ， 先 检测 复 选 框 是 否 被 选中 ， 如 果 被 选中 ， 则 调用 $event 常 量 的 stopPropagation 方 法 阻止 元 素 事 件 的 冒 泡 ， 如 
果 不 选 中 ， 则 不 执行 阻止 元 素 事件 冒 泡 的 代码 ， 而 进行 事件 的 默认 操作 。 


需要 说 明 的 是 ， 由 于 复 选 框 元 素 本 身 也 是 一 个 子 节点 ， 为 了 防止 它 在 单 击 时 同样 出 现 元 素 事 件 的 冒 泡 现象 ， 需 要 在 复 选 框 的 单 击 事件 中 调用 $event 常 量 的 stopPropagation 方 法 
进行 冒 泡 阻止 ， 完 整 代码 如 自 定义 change 方 法 所 示 。 


站 解决 单 击 按钮 事件 中 的 冒 ; x 


在 按 包 的 单 击 事件 中 ， 阻 止 冒 泡 现象 
回 是 否 阻止 冒 泡 ? 


选中 复 选 框 时 ， 单 击 按钮 后 ， 
阻止 了 事件 的 冒 泡 现象 


父 级 被 触发 


在 按钮 的 单 击 事件 中 ， 阻 止 冒 泡 现象 
回 是 否 阻止 冒 泡 ? 


未 选中 复 选 框 时 ， 单 击 按钮 后 ， 
出 现 的 事件 冒 泡 现象 


图 10-7 ”解决 单 击 按钮 事件 中 的 冒 泡 现象 


10.4 释放 多 余 的 $ywatch 监 测 函 数 


我 们 知道 ， 在 Angular 中 ， 数 据 的 双向 绑 定 是 它 非常 强大 的 功能 ， 也 是 它 区 别 于 其 他 前 端 框架 的 特征 之 一 ， 而 这 个 功能 的 实现 离 不 开 $watch 函 数 。 如 果 在 移动 端 设备 中 ， 众 多 的 
数据 双向 绑 定 必然 诞生 大 量 的 $watch 函 数 执行 ， 这 些 $watch 函 数 的 执行 会 导致 页 面 数 据 加 载 缓 慢 、 元 素 绑 定 方法 执行 效率 过 低 等 性 能 问题 ， 因 此 ， 当 不 需要 时 ， 必 须 及 时 释放 多 余 
的 $watch 监 测 函 数 。 


在 Angular 中 ， 当 $watch 函 数 被 直接 调用 时 ， 将 返回 一 个 释放 $watch 绑 定 的 unbind 函 数 。 因 此 ， 根 据 这 个 特征 ， 当 需要 释放 某 个 多 余 的 $gwatch 监 测 函 数 时 ， 只 需要 再 次 调用 这 
个 $watch 函 数 就 可 以 轻松 地 释放 它 的 监测 功能 。 


接 下 来 ， 通 过 一 个 简单 的 示例 来 演示 Angular 中 释放 多 余 的 $watch 监 测 函 数 的 过 程 。 


示例 10-8 ”释放 多 余 的 $watch 监 测 函 数 


(1) 功能 描述 


在 页 面 中 ， 先 添加 一 个 输入 框 元 素 ， 并 通过 ng-model 指 令 实现 输入 内 容 的 双向 绑 定 ， 当 输入 框 的 内 容 发 生变 化 时 ， 新 添加 的 <div> 元 素 将 动态 显示 它 变化 后 的 总 次 数 。 此 外 ， 再 
添加 一 个 “停止 监测 ”按钮 ， 单 击 该 按钮 时 ， 将 释放 输入 框 的 gwatch 监 测 函 数 ，<div> 元 素 也 将 停止 显示 总 次 数 。 


2) 实现 代码 


一 


新 建 一 个 HTML 文 件 10-8.html， 加 入 如 代码 清单 10-8 所 示 的 代码 。 


代码 清单 10-8 ”释放 多 余 的 $watch 监 测 函数 


<!DOCTYPE html> 
<html ng-app="al0 8"> 
<head> 
<tit1le> 释 放 多 余 的 Swatch 监测 函数 </tLit1le> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/../Script/angular.min.js"></script> 
<style type="text/css"> 
.frame { 
padding: 5px 8px; 
margin: Opx; 
font-size: 12px; 
width: 320px; 
background-color: #eee; 


.frame button, .frame div { 
margin: Spx Opx; 
} 
</style> 
</head> 
<body> 
<div ng-controller="c10 8" class="frame"> 
<input type="text" ng-model="content" /> 
<div> 第 {{num}} 次 数据 变化 .</div> 
<button ng-click="stopWatch () "> 停止 监测 </button> 
</div> 
<script type="text/javascript"> 
angular.module("al0 8', []) 
.controller('c10 8', function ($scope) { 
$scope.num = 0; 
$scope.stopWatch = function () { 
contentWatch (); 
} 
var contentWatch = $scope 
.$watch('content', function (newVal, oldVal) { 
if (newVal =—= oldVal) { return; } 
$scope.numt+; 
1); 
Fy 


</script> 
</body> 
</html> 
(3) 页 面 效 果 


执行 HTML 文 件 10-8.html， 最 终 实 现 的 页 面 效 果 如 图 10-8 所 示 。 


(4) 源码 分 析 


在 本 示例 的 代码 中 ， 由 于 输入 框 元 素 通过 ng-model 指 令 实现 了 值 的 双向 绑 定 ， 因 此 ，Angular 将 会 通过 $watch 监 测 “content” 值 的 变化 ， 即 自动 执行 $scope.$watch 方 法 ， 调 
用 格式 如 下 。 


站 释放 多 余 的 $watch 监 测 函 x 


单 击 “停止 监测 ”按钮 后 
5 次 数据 变化 _A 由 于 释放 了 S$watch 监测 郴 
停止 是 z 数 ， 导 致 总 次 数 停止 累 增 


. 5 次 灶 扫 区 化 -AAA 


图 10-8 ”释放 多 余 的 $watch 监 测 函 数 


S$watch (watchExpression, listener, objectEquality) 


在 $watch 方 法 的 调用 格式 中 ， 第 一 个 参数 为 字符 型 ， 表 示 需 要 监测 的 表达 式 ;第 二 个 参数 为 函数 ， 当 监测 的 表达 式 发 生 了 变化 后 ， 第 二 个 参数 对 应 的 函数 将 会 自动 执行 ， 当 判断 
函数 中 两 个 参数 newValue 和 oldValue 的 值 是 否 相等 时 ， 会 以 递归 的 方式 调用 angular.equals 方 法 去 修改 数据 ， 并 一 直 检测 到 没有 修改 为 止 。 


需要 说 明 的 是 ， 当 页 面 加 载 完成 时 ，$watch 函 数 将 会 被 首次 执行 。 为 了 使 首次 监测 时 不 进行 累计 数 ， 根 据 首次 执行 函数 newValue 和 oldValue 的 值 都 为 “undefined” 的 特征 ， 
即 两 者 此 时 拥有 相同 的 值 ， 如 果 相同 ， 则 调用 return 语 句 ， 退 出 累计 数 。 


当 单 击 “ 停 止 监测 ”按钮 时 ， 将 会 调用 stopWatch 方 法 ， 在 这 个 方法 中 ， 调 用 contentWatch 方 法 ， 而 这 个 方法 对 应 的 就 是 gwatch 函 数 的 返回 值 ， 即 返回 一 个 释放 $watch 绑 定 的 
unbind 函 数 ， 最 终 实现 停止 监测 的 效果 。 


10.5 解决 ng-if 中 ng-model 值 无 效 的 问题 


在 Angular 中 ，ng-if 指 令 的 功能 与 hg-show 指 令 相似 ， 都 用 于 控制 元 素 的 显示 与 隐藏 ， 但 两 者 又 有 区 别 ，ng-if 指 令 会 移 除 DOM 原 有 的 元 素 ， 而 ng-show 指 令 只 是 将 元 素 
的 “display” 属 性 值 设 置 为 “none”。 因 此 ， 在 使 用 时 必须 根据 实际 的 需要 进行 选择 性 使 用 。 


此 外 ， 与 其 他 指令 一 样 ，ng-if 指 令 也 会 创建 一 个 子 级 作用 域 ， 因 此 ， 如 果 在 ng-if 指 令 中 添加 了 元 素 ， 并 向 元 素 属 性 增加 ng-model 指 令 ， 那 么 ng-model 指 令 对 应 的 作用 域 属性 
子 级 作用 域 ， 而 并 非 控 制 器 注入 的 $scope 作 用 域 对 象 ， 这 点 在 进行 双向 数据 绑 定时 ， 需 要 引起 注意 。 


接 下 来 ， 通 过 一 个 简单 的 示例 来 演示 解决 ng-if 中 ng-model 值 无 效 问题 的 过 程 。 


示例 10-9 ”解决 ng-if 中 ng-model 值 无 效 的 问题 


(1) 功能 描述 
在 页 面 中 ， 分 别 以 普通 方式 和 ng-if 方 式 添加 两 个 复 选 框 元 素 ， 并 在 元 素 的 属性 中 增加 ng-model 属 性 双向 绑 定 选择 值 ， 在 ng-if 方 式 中 ， 复 选 框 元 素 绑 定 的 ng-model 属 性 值 必须 
与 控制 器 定义 的 值 保持 同步 ， 以 实现 双向 绑 定 的 效果 。 


(2) 实现 代码 
新 建 一 个 HTML 文 件 10-9.html， 加 入 如 代码 清单 10-9 所 示 的 代码 。 


代码 清单 10-9 解决 ng-if 中 ng-model 值 无 效 的 问题 


<!DOCTYPE html> 
<html ng-app="al0 9"> 
<head> 
<title> 解 决 ng-if 中 ng-model 值 无 效 的 问题 </title> 
<script src="http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15404/0EBPS/Text/../Script/angular.min.js"></script> 


<style type="text/css"> 
.frame { 
padding: 5px 8px; 
margin: Opx; 
font-size: 12px; 
width: 320px; 
background-color: #eee; 
于 
.frame div { 
margin: 5px Opx; 
} 


</style> 
</head> 
<body> 
<div ng-controller="c10 9" class="frame"> 
<div> 
a 的 值 : {{a}}<br /> 
b 的 值 : {{b}} 
</div> 
<div> 


普通 方式 : <input type="checkbox" ng-model="a" /> 
</div> 
<div ng-if="!a"> 
ngIf 方 式 : <input type="checkbox" ng-model="$parent.b" /> 
</div> 
</div> 
<script type="text/javascript"> 
angular.module ('al0 9', []) 
.controller('c10 9', function ($scope) { 
$scope.a = false; 
$scope.b = false; 
六 
</script> 
</body> 
</html> 


(3) 页 面 效果 


执行 HTML 文 件 10-9.html， 最 终 实现 的 页 面 效 果 如 图 10-9 所 示 。 


癌 解决 ng-ifrhng-model 值 ; x 
€ 3 CC | localhost/Ch10/10-9.html pg 


选中 ng-if 方 式 时 
显示 的 页 面 效 果 


选中 普通 方式 时 
显示 的 页 面 效果 


图 10-9 ”解决 ng-if 中 ng-model 值 无 效 的 问题 


(4) 源码 分 析 


在 本 示例 的 代码 中 ， 普 通 方式 中 复 选 框 元 素 的 ng-model 属 性 绑 定 控制 器 中 的 变量 as，ng-if 方 式 中 复 选 框 元 素 的 ng-model 属 性 绑 定 控制 器 中 的 变量 b。 因 为 是 双向 数据 绑 定 ， 因 
此 ， 当 复 选 框 的 选中 状态 发 生变 化 时 ， 对 应 绑 定 的 变量 值 也 将 会 自动 同步 变化 。 


在 ng-if 方 式 中 ， 每 个 包含 的 元 素 都 拥有 自己 的 作用 域 ， 因 此 ， 复 选 框 元 素 也 拥有 自己 的 $gscope 作 用 域 。 相 对 于 控制 器 作用 域 来 说 ， 这 个 作用 域 属于 一 个 子 级 作用 域 ， 所 以 ， 如 果 
它 想 绑 定 控制 器 中 的 变量 值 ， 必 须 添加 $parent 标 识 ， 只 有 这 样 才能 访问 到 控制 器 中 的 变量 。 


因此 ， 解 决 ng-if 中 ng-model 值 无 效 的 问题 ， 主 要 方法 就 是 在 绑 定 值 时 添加 $parent 标 识 ， 或 者 用 ng-show 指 令 代 蔡 ng-if 指 令 ， 这 两 种 方法 都 可 以 达到 同样 的 页 面 效果 。 


10.6 ”本章 小 结 


本 章 从 实战 出 发 ， 总 结 式 地 展示 了 错误 产生 的 原因 和 解决 方案 。 首 先 ， 从 一 些 基础 的 使 用 技巧 实战 经 验 讲 起 ， 如 element 方 法 控制 DOM 元 素 、 解 决 setTimeout 改 变 属性 的 无 效 、 


解决 双 大 括号 绑 定 元 素 时 的 闪烁 问题 。 


并 


然后 ， 重 点 讲述 了 在 使 用 ng-repeat 指 令 显 示 数 据 时 出 现 的 各 种 错误 和 注意 事项 ， 如 ng-repeat 指 令 中 $index 值 、track by 表达 式 排 序 和 各 元 素 间 的 $scope 作 用 域 的 范围 。 


结合 一 个 个 完整 实用 的 示例 ， 介 绍 在 使 用 Angular 开 发 应 用 时 ， 经 常 遇 到 的 问题 和 最 佳 实践 方法 ， 包 括 阻止 事件 的 冒 泡 、 停 止 元 素 监测 和 ng-if 指 令 中 ng-mode 值 无 效 。 


最 后 


第 11 章 ”综合 案例 开发 


在 前 面 的 章节 中 ， 我 们 学 习 了 Angular 框 架 的 基础 知识 ， 也 了 解 了 如 何 使 用 Angular 框 架 去 开发 一 个 Web 应 用 的 流程 ， 但 Angular 毕 竟 是 一 个 全 新 的 前 端 开发 框架 ， 它 需要 开发 人 
员 学 习 许多 全 新 的 概念 与 开发 思维 ， 而 这 个 过 程 需要 不 断 地 实践 来 支撑 ， 也 就 是 说， 只 有 在 开发 案例 的 实践 过 程 中 不 断 去 积累 与 总 结 ， 才 能 真正 理解 和 掌握 之 前 学 到 的 基础 知识 。 


在 本 章 中 ， 将 通过 两 个 案例 开发 过 程 的 演示 ， 进 一 步 巩 固 前 面 所 学 的 理论 知识 ， 同 时 加 深 对 使 用 Angular 框 架 开 发 Web 应 用 流程 的 掌握 ， 使 读者 能 透 过 这 些 案例 的 开发 ， 领 悟 到 
Angular 框 架 在 应 用 开发 过 程 中 带 来 的 便利 和 强大 的 应 用 处 理 能 力 。 


11.1 基于 AngularJS 使 用 canvas 绘 制 圆 形 进 度 条 


HTML 5 是 目前 前 端 开发 的 热点 ， 它 给 前 端的 开发 带 来 了 新 的 方向 ， 因 此 ,许多 前 端的 开发 框架 都 基于 HTML 5 或 在 它 的 基础 之 上 进行 扩展 。Angular 框 架 也 不 例外 ， 它 非常 方便 
地 支持 HTML 5 的 新 元 素 和 API， 基 于 Angular 框 架 ， 调 用 HTML 5 新 增加 的 元 素 开 发 应 用 ， 是 一 个 非常 不 错 的 选择 。 接 下 来 ， 我 们 介绍 如 何 基 于 AngularJs 使 用 canvas 绘 制 圆 形 进度 条 
的 过 程 。 


11.2 ”使 用 AngularJS 开 发 一 个 抽奖 应 用 


在 日 常 应 用 的 开发 中 ， 经 常 有 抽奖 应 用 开发 的 需求 ， 利 用 Angular 框 架 可 以 十 分 高 效 地 开发 出 一 个 很 实用 的 抽奖 应 用 ， 这 个 应 用 不 仅 代码 简洁 ， 而 且 执 行 效率 高 、 扩 展 性 强 。 接 下 
来 ， 我 们 将 完整 地 介绍 这 个 基于 Angular 框 架 的 抽奖 应 用 开发 过 程 。 
11.3 “本章 小 结 


在 本 章 中 ， 先 通过 演示 圆 形 进度 条 案例 开发 的 过 程 ， 使 读者 在 了 解 指令 概念 的 基础 之 上 ， 学 会 运用 所 学 ， 自 己 动手 开发 一 个 指令 对 象 ， 并 将 它 绑 定 到 页 面 元 素 中 。 同 时 ， 通 过 本 
案例 的 开发 ， 进 一 步 掌 握 了 $interva| 方 法 在 应 用 中 的 使 用 技巧 。 


另外 ， 通 过 演示 抽奖 案例 开发 的 过 程 ， 使 读者 进一步 了 解 多 个 页 面 展示 效果 在 单 页 应 用 开发 中 的 实现 方法 ， 也 进一步 加 深 了 对 $timeout 方 法 的 使 用 的 理解 。 


